<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-28 22:08:35
 * @LastEditTime: 2024-07-03 22:18:22
 * @Description: 合集列表
-->
<template>
  <div class="fit column">
    <div class="video-list-header h-col-auto flex justify-between">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        :loading="loading"
        @click="turnTo"
      >
        创建合集
      </el-button>
      <el-button
        size="small"
        :loading="loading"
        :disabled="isShow"
        @click="openShow"
      >
        删除
      </el-button>
      <div class="flex justify-end h-col">
        <div class="w-300">
          <el-input
            v-model="searchVal"
            placeholder="输入合集筛选视频"
            clearable
            size="small"
            @keydown.enter.native="search"
          >
            <i
              slot="suffix"
              class="el-icon-search el-input__icon"
            ></i>
          </el-input>
        </div>
        <div class="m-l-10">
          <el-button
            type="primary"
            size="small"
            :loading="loading"
            @click="search"
          >
            查询
          </el-button>
        </div>
      </div>
    </div>
    <div class="video-list-body h-col m-t-14 flex overflow-auto">
      <template v-if="!videoList.length">
        <div
          class="full-w h-240 bg-#F4F5F9 cursor-pointer center column rd-4"
          @click="turnTo"
        >
          <div class="h-40 h-40 m-b-20">
            <img
              :src="require('@/assets/images/video/video-plus.png')"
              class="fit"
            />
          </div>
          <div class="text-#1C1D23 text-20 line-height-23 font-600 m-b-4">
            创建合集
          </div>
          <div class="text-#9e9e9e text-12 line-height-14">
            还没有合集，点击创建合集
          </div>
        </div>
      </template>
      <div
        v-else
        class="fit video-list-body-card"
      >
        <seriesCard
          v-for="item in videoList"
          :key="item.id"
          :data="item"
          :is-do="isShow"
          :is-checked="checkedList.includes(item.id)"
          @check="checkedPush"
          @delete="deleteSeries"
        />
      </div>
    </div>
    <div
      v-if="isShow"
      class="video-list-footer h-col-auto flex justify-center"
    >
      <el-button
        size="small"
        :loading="loading"
        @click="cancel"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="save"
      >
        保存
      </el-button>
    </div>
  </div>
</template>
<script>
import seriesCard from '@/components/bmp/card/series-card.vue'
import { getCollectList, deleteSingleSeries } from '@/api/video'

import { Loading } from 'element-ui'
export default {
  components: {
    seriesCard
  },
  data() {
    return {
      loading: false,
      visible: false,
      searchVal: '',
      videoList: [],
      dataList: [],
      isShow: false,
      checkedList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    turnTo() {
      this.$router.push({
        path: 'add-series'
      })
    },
    getData() {
      this.loading = true
      const loadingInstance = Loading.service()
      getCollectList()
        .then((res) => {
          if (res && res.code === 0) {
            this.videoList = res.data
          }
        })
        .catch(() => {
          this.$message.error('获取错误，请重试')
        })
        .finally(() => {
          this.loading = false
          this.$nextTick(() => {
            loadingInstance.close()
          })
        })
    },
    openShow() {
      if (!this.isShow) {
        this.isShow = true
      }
    },
    cancel() {
      this.isShow = false
      this.checkedList = []
    },
    // 选择-取消选择
    checkedPush(id) {
      const index = this.checkedList.indexOf(id)
      if (index !== -1) {
        this.checkedList.splice(index, 1)
      } else {
        this.checkedList.push(id)
      }
    },
    search() {
      this.videoList = this.dataList.filter((i) =>
        i.title.includes(this.searchVal)
      )
    },
    // 删除单一合集promise形式
    fetchRequest(id) {
      return new Promise((resolve, reject) => {
        deleteSingleSeries({
          id
        })
          .then((res) => {
            if (res && res.code === 0) {
              resolve(true)
            } else {
              reject()
            }
          })
          .catch(() => {
            reject()
          })
      })
    },
    // 删除单一合集
    deleteSeries(id) {
      this.$confirm('确定删除该合集?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除接口
          deleteSingleSeries({
            id
          })
            .then((res) => {
              if (res && res.code === 0) {
                this.getData()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'warning',
                message: '删除失败，请重试'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    save() {
      if (this.checkedList.length) {
        this.$confirm('确定删除这些合集?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            try {
              const requests = this.checkedList.map((index) =>
                this.fetchRequest(index)
              )
              Promise.all(requests)
                .then(() => {
                  this.cancel()
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.getData()
                })
                .catch(() => {
                  this.$message({
                    type: 'warning',
                    message: '删除失败，请重试'
                  })
                })
            } catch (error) {
              console.error('An error occurred:', error)
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } else {
        this.$message({
          type: 'warning',
          message: '当前未选择合集'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.video-list-body-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, 570px);
  row-gap: 12px;
  column-gap: 20px;
  grid-auto-rows: auto;
  align-content: start;
  // justify-content: center;
}
</style>
